<template>
   <view class="materialsInfo">
        <view class="materialsInfo-information" @click="materialOpen">
			    <view class="materialsInfo-information-image">
					<image :src="itemData.mainImage"></image>
				</view>
				<view class="materialsInfo-information-orderName">
					<view class="materialsInfo-information-orderName-text">{{itemData.materialShortName}}</view>
					<view>{{itemData.materialNo}}</view>
					<view v-if="itemData.twoCount" style="color: #6d5ece;">{{itemData.materialUnit}} / {{itemData.twoUnit}}</view>
					<view v-else style="color: #6d5ece;">{{itemData.materialUnit}}</view>
				</view>	
        </view>

        <view class="materialsInfo-applyFor">
            <view class="materialsInfo-applyFor-titleTag">
				<view class="materialsInfo-applyFor-titleTag-icon"></view>申请信息
			</view>
            <view class="materialsInfo-applyFor-info">
                <view class="materialsInfo-applyFor-info-item" v-for="item,index in list" :key="index">
                    <view class="materialsInfo-applyFor-info-item-left">{{item.left}}</view>
                    <view class="materialsInfo-applyFor-info-item-right">{{item.right}}</view>
                </view>
            </view>
        </view>

        <view class="materialsInfo-applyFor">
            <view class="materialsInfo-applyFor-titleTag" style="border-bottom:none;">
				<view class="materialsInfo-applyFor-titleTag-icon"></view>物料属性维度信息
			</view>
            <view class="materialPropertyList">
                <view class="materialPropertyList-item" v-for="(item,index) in attributeValue" :key="index">
                    <view class="materialPropertyList-item-index">{{index+1}}</view>
                    <view class="materialPropertyList-item-name">{{item.name}}</view>
                    <view class="materialPropertyList-item-type">{{item.value}}</view>
                </view>
            </view>
        </view>
        <view></view>
   </view>
</template>

<script>
export default {
    data(){
        return{
			itemData:{},
			attributeValue:[],
            list:[
                {left:"订单数",right:""},
                {left:"不/含税单价",right:""},
                {left:"不/含税总价",right:""},
                {left:"税率",right:""},
                {left:"期望到货时间",right:""},
                {left:"备注",right:""},
                {left:"发货要求",right:""},
                {left:"包装要求",right:""},
            ]
        }
    },
	onLoad(option) {
		let data = JSON.parse(decodeURIComponent(option.item))
		this.itemData = data
		this.initialize()
	},
	methods:{
		initialize(){
			let data = this.itemData
			// 订单数
			if(data.twoCount){
				let orderNumber  = data.materialCount + data.materialUnit + '/' + item.twoCount + item.twoUnit
				this.list[0].right = orderNumber
			}else{
				let orderNumber  = data.materialCount + data.materialUnit
				this.list[0].right = orderNumber
			}
			// 不/含税单价
			this.list[1].right = data.taxExcluded ? data.taxExcluded : ''
			// 不/含税总价
			this.list[2].right = data.taxExcludedCount ? data.taxExcludedCount : ''
			// 税率
			if(data.taxRate){
				let num = data.taxRate * 100
				let isNaN = (num + '').indexOf('.') == -1 
				if(!isNaN){ // 有小数点就保留3位小数点
					num = num.toFixed(3)
				}
				this.list[3].right = num +'%'
			}
			// 期望到货时间
			if(data.expectedTime){
				this.list[4].right = data.expectedTime.split(' ')[0]
			}else{
				this.list[4].right = ''
			}
			// 备注
			this.list[5].right = data.remark ? data.remark : ''
			// 发货要求
			this.list[6].right = data.deliveryMethod ? data.deliveryMethod : ''
			// 包装要求
			this.list[7].right = data.packMethod ? data.packMethod : ''
			
			// 物料属性维度信息
			if(data.param){
				let obj = JSON.parse(data.param)
				let arr = []
				for(let i in obj){
					let objData = {}
					objData.name = i
					objData.value = obj[i]
					arr.push(objData)
				}
				this.attributeValue = arr
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.materialsInfo{
    background-color: #f3f3f3;
    height: 100vh;
    &-information{
        display: flex;
        padding: 30rpx;
        line-height: 40rpx;
        background-color: #fff;
        &-image{
            width: 120rpx;
            height: 120rpx;
            margin-right: 20rpx;
            image{
                width: 100%;
                height: 100%;
            }
        }
        &-orderName{
            color: #979797;
            font-size: 26rpx;
            &-text{
                color: #262626;
                font-weight: 700;
                font-size: 32rpx;
            }
        }
    }
    
    &-applyFor{
        margin: 15rpx;
        &-titleTag{
			display: flex;
			align-items: center;
			padding: 20rpx 0;
            font-weight: 700;
			margin-top: 20rpx;
			background-color: #fff;
			border-bottom: 2rpx solid #f3f3f3;
			&-icon{
				width: 8rpx;
				height: 30rpx;
				margin: 0 15rpx;
				background-color: #30a875;
			}
		}
        &-info{
            line-height: 60rpx;
            padding: 10rpx 20rpx;
            background-color: #fff;
            &-item{
                display: flex;
                align-items: center;
                justify-content: space-between;
                &-left{
                    color: #979797;
                }
                &-right{
                    color: #262626;
                }
            }
        }
        .materialPropertyList{
            padding: 10rpx 20rpx 25rpx 20rpx;
            background-color: #fff;
            &-item{
                display: flex;
                height: 70rpx;
                border: 2rpx solid #e1e1e1a8;
                &-index,&-name,&-type{
                    width: 40%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-right: 1rpx solid #e1e1e1a8;
                }
                &-index{
                    width: 20%;
                }
                &-type{
                    border-right: none;
                }
            }
        }

    }
    
        
}


</style>